<template>
  <div id="applyleave">
    <div class="top">
      <el-button type="primary" @click="ClickAdd">新增</el-button>
      <div class="Inputs">
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkone" @click="Clickone" /> 草稿
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checktwo" @click="Clicktwo" /> 待审核
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkthree" @click="Clickthree" /> 审批通过
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkfour" @click="Clickfour" /> 审批不通过
        </div>
        <div class="check" style="margin-right:10px;position:relative">
          <el-input placeholder="请输入搜索关键字" maxlength="15" style="width:330px;" v-model="InputValue"></el-input>
          <i class="iconfont icon-sousuo" @click="ToCheck"></i>
        </div>
        <div>
          <i class="iconfont icon-shuaxin" @click="Toreload"></i>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{background:'#F5F5F5'}"
      style="padding-left:20px;padding-right:20px;margin-top:20px;"
      show-overflow-tooltip
    >
      <el-table-column
        v-for="(item,index) in tableTitle"
        :key="index"
        :prop="item.tableprop"
        :label="item.name"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClickone(scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClicktwo(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClickthree(scope.row)"
            type="text"
            size="small"
          >提交</el-button>
          <el-button
            v-if="scope.row.States == '待审批'"
            @click="handleClickfour(scope.row)"
            type="text"
            size="small"
          >撤回</el-button>
          <el-button
            v-if="scope.row.States != '草稿'"
            @click="handleClickfive(scope.row)"
            type="text"
            size="small"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="Pages">
      <el-pagination
        :hide-on-single-page="true"
        :page-size="pagesize"
        :pager-count="9"
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <!-- 新增弹出框 -->
    <el-dialog title="请假申请单" center :visible.sync="dialogtwo" width="40%">
      <el-form label-width="100px" :model="formone">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单据编号:">
              <el-input v-model="formone.Order" :disabled="LookType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间:">
              <el-date-picker
                v-model="formone.Time"
                type="date"
                placeholder="选择日期"
                :disabled="LookType"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请人:">
              <el-input v-model="formone.People" :disabled="LookType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门:">
              <el-select placeholder="请选择部门:" v-model="formone.Department" :disabled="LookType" style="width:100%">
                <el-option
                  v-for="item in DepartType"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型:">
              <el-select placeholder="请选择类型:" v-model="formone.Type" :disabled="LookType" style="width:100%">
                <el-option
                  v-for="item in TypeData"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请假天数:">
              <el-input v-model="formone.Days" :disabled="LookType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="请假日期:">
          <el-date-picker
            v-model="formone.Times"
            align="right"
            type="dates"
            placeholder="选择日期"
            style="width:100%"
            :disabled="LookType"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请原因:">
          <el-input v-model="formone.Why" type="textarea" :disabled="LookType"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-top:10px;">
        <el-button type="primary" @click="ClickYes">确定</el-button>
        <el-button @click="Canclematerial">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ApplyLeave",
  data() {
    return {
      LookType: false,
      Checkone: true,
      Checktwo: true,
      Checkthree: true,
      Checkfour: true,
      InputValue: "",
      tableTitle: [
        { name: "状态", tableprop: "States" },
        { name: "申请单号", tableprop: "ApplyOrder" },
        { name: "申请时间", tableprop: "ApplyTime" },
        { name: "申请人", tableprop: "ApplyPeople" },
        { name: "所在部门", tableprop: "Department" },
        { name: "类型", tableprop: "Type" },
        { name: "请假日期", tableprop: "Date" },
        { name: "请假天数", tableprop: "Days" }
      ],
      tableData: [
        {
          States: "草稿",
          ApplyOrder: "SPA111111",
          ApplyTime: "2019-01-01",
          ApplyPeople: "张三",
          Department: "电器维修组",
          Type: "事假",
          Date: "2019-01-01",
          Days: "1天"
        },
        {
          States: "待审批",
          ApplyOrder: "SPA222222",
          ApplyTime: "2019-01-02",
          ApplyPeople: "李四",
          Department: "电器维修组",
          Type: "事假",
          Date: "2019-01-02",
          Days: "1天"
        },
        {
          States: "审批通过",
          ApplyOrder: "SPA333333",
          ApplyTime: "2019-01-03",
          ApplyPeople: "王五",
          Department: "电器维修组",
          Type: "事假",
          Date: "2019-01-03",
          Days: "1天"
        },
        {
          States: "审批未通过",
          ApplyOrder: "SPA444444",
          ApplyTime: "2019-01-04",
          ApplyPeople: "谢六",
          Department: "电器维修组",
          Type: "事假",
          Date: "2019-01-04,2019-01-05",
          Days: "2天"
        },
        {
          States: "草稿",
          ApplyOrder: "SPA555555",
          ApplyTime: "2019-01-05",
          ApplyPeople: "李七",
          Department: "电器维修组",
          Type: "事假",
          Date: "2019-01-05",
          Days: "1天"
        }
      ],
      total: 20,
      pagesize: 10,
      dialogtwo: false,
      formone: {
        Order: "",
        Time: "",
        People: "",
        Department: "",
        Type: "",
        Days: "",
        Times: "",
        Why: ""
      },
      DepartType: [
        { Id: "1", Name: "电子维保组" },
        { Id: "2", Name: "电器维修组" }
      ],
      TypeData: [
        { Id: "1", Name: "病假" },
        { Id: "2", Name: "事假" },
        { Id: "3", Name: "调休" }
      ]
    };
  },
  methods: {
    //点击新增
    ClickAdd() {
      this.dialogtwo = true;
      this.LookType = false;
      this.formone = {
        Order: "",
        Time: "",
        People: "",
        Department: "",
        Type: "",
        Days: "",
        Times: "",
        Why: ""
      };
    },
    //搜索关键字
    ToCheck() {},
    //刷新
    Toreload() {
      this.$router.go(0);
    },
    //勾选框
    Clickone() {
      if (this.Checkone) {
        this.Checkone = false;
      } else {
        this.Checkone = true;
      }
    },
    Clicktwo() {
      if (this.Checktwo) {
        this.Checktwo = false;
      } else {
        this.Checktwo = true;
      }
    },
    Clickthree() {
      if (this.Checkthree) {
        this.Checkthree = false;
      } else {
        this.Checkthree = true;
      }
    },
    Clickfour() {
      if (this.Checkfour) {
        this.Checkfour = false;
      } else {
        this.Checkfour = true;
      }
    },
    //点击编辑
    handleClickone(r) {
      this.dialogtwo = true;
      this.LookType = false;
      //填充数据
    },
    //点击删除
    handleClicktwo(r) {
      this.$confirm("是否删除此条请假申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击提交
    handleClickthree(r) {
      this.$confirm("是否提交此条请假申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击撤回
    handleClickfour(r) {
      this.$confirm("是否撤回此条请假申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击查看
    handleClickfive(r) {
      this.dialogtwo = true;
      this.LookType = true;
      //填充数据
    },
    //分页
    current_change(currentPage) {
      console.log(currentPage);
    },
    //点击表单确定
    ClickYes() {
      if (this.LookType) {
      } else {
        //新增或编辑接口
        console.log("发送数据");
      }
      this.dialogtwo = false;
    },
    //点击表单取消
    Canclematerial() {
      this.dialogtwo = false;
    }
  },
  mounted() {},
  watch: {}
};
</script>

<style scoped>
#applyleave {
  position: relative;
}
.top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.Inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.Inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check > i {
  position: absolute;
  right: 20px;
}
.Pages {
  position: absolute;
  margin-top: 50px;
  right: 200px;
}
</style>